<template>
  <div class="deposit_list_page">
    <div class="select_box">
      <van-dropdown-menu class="dropdown_box">
        <van-dropdown-item :title="currentTime" ref="item">
          <van-datetime-picker
            v-model="currentDate"
            type="year-month"
            title="选择年月"
            :max-date="maxDate"
            :formatter="formatter"
            @confirm="checkDate"
            @cancel="cancelDate"
          />
        </van-dropdown-item>
        <van-dropdown-item v-model="type" :options="types" />
      </van-dropdown-menu>
    </div>
    <div class="content_box">
      <van-cell is-link center title="阿狸服装有限公司" value="100000000000"
                label="667897867565656" @click="next" />
    </div>
  </div>
</template>
<script>
import { DropdownMenu, DropdownItem, DatetimePicker } from 'vant';

export default {
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [DatetimePicker.name]: DatetimePicker
  },
  data() {
    return {
      currentTime: '日期',
      currentDate: new Date(),
      maxDate: new Date(),
      type: 0,
      types: [
        { text: '全部', value: 0 },
        { text: '支出', value: 1 },
        { text: '收入', value: 2 }
      ]
    };
  },
  methods: {
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      }
      return `${val}月`;
    },
    checkDate(val) {
      const options = { year: 'numeric', month: 'long' };
      this.currentTime = val.toLocaleDateString('zh', options);
      this.$refs.item.toggle();
    },
    cancelDate() {
      this.$refs.item.toggle();
    },
    next() {
      this.$router.push('/depositDetail');
    }
  }
};
</script>

<style lang="less">
.deposit_list_page {
  height: 100%;
  .select_box {}
  .content_box {
    background-color: red;
  }
}
</style>
